import { ref, onMounted, onBeforeUnmount } from 'vue';
import { is_ios, isApp } from '@/utils/util';
import constants from '@/common/constants';

export function useNavBarHeight(defaultHeight = 46) {
  const statusDefaultHeight = isApp() && !is_ios() ? constants.ANDROID_STATUS_BAR_DEFAULT_HEIGHT : 0;
  const navBarHeight = ref(defaultHeight + statusDefaultHeight);

  if (isApp() && is_ios()) {
    const resizeObserver = new ResizeObserver((entries) => {
      navBarHeight.value = entries[0].contentRect.height;
    });
    onMounted(() => {
      console.log('触发监听');
      resizeObserver.observe(document.querySelector('.headerNavBar') as Element);
    });
    onBeforeUnmount(() => {
      resizeObserver.unobserve(document.querySelector('.headerNavBar') as Element);
    });
  }

  return { navBarHeight };
}
